<template>
	<view class="container">
		<view class="header">
			<text class="title">密码强度检测</text>
			<text class="subtitle">检测您的密码安全性</text>
		</view>
		
		<!-- 密码输入区域 -->
		<view class="password-input-section">
			<view class="input-wrapper">
				<input 
					class="password-input" 
					v-model="password" 
					:type="showPassword ? 'text' : 'password'"
					placeholder="请输入要检测的密码"
					@input="checkPasswordStrength"
				/>
				<view class="toggle-btn" @click="togglePasswordVisibility">
					<text class="toggle-icon">{{ showPassword ? '👁️' : '🔒' }}</text>
				</view>
			</view>
		</view>
		
		<!-- 强度指示器 -->
		<view v-if="password" class="strength-indicator">
			<view class="strength-bar">
				<view 
					class="strength-fill" 
					:class="strengthClass"
					:style="{ width: strengthPercentage + '%' }"
				></view>
			</view>
			<view class="strength-text">
				<text class="strength-label">{{ strengthLabel }}</text>
				<text class="strength-score">得分: {{ strengthScore }}/100</text>
			</view>
		</view>
		
		<!-- 详细分析 -->
		<view v-if="password" class="analysis-section">
			<view class="section-title">详细分析</view>
			
			<!-- 检查项目列表 -->
			<view class="check-list">
				<view 
					class="check-item" 
					v-for="(check, index) in checks" 
					:key="index"
					:class="{ 'passed': check.passed, 'failed': !check.passed }"
				>
					<view class="check-icon">
						<text class="icon">{{ check.passed ? '✅' : '❌' }}</text>
					</view>
					<view class="check-content">
						<text class="check-title">{{ check.title }}</text>
						<text class="check-desc">{{ check.description }}</text>
					</view>
					<view class="check-score">
						<text class="score-text">+{{ check.score }}</text>
					</view>
				</view>
			</view>
			
			<!-- 建议改进 -->
			<view v-if="suggestions.length > 0" class="suggestions-section">
				<view class="section-title">改进建议</view>
				<view class="suggestion-list">
					<view 
						class="suggestion-item" 
						v-for="(suggestion, index) in suggestions" 
						:key="index"
					>
						<text class="suggestion-icon">💡</text>
						<text class="suggestion-text">{{ suggestion }}</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view v-else class="empty-state">
			<text class="empty-icon">🔍</text>
			<text class="empty-text">请输入密码开始检测</text>
		</view>
		
		<!-- 快速测试按钮 -->
		<view class="quick-test-section">
			<view class="section-title">快速测试</view>
			<view class="test-buttons">
				<button 
					class="test-btn" 
					v-for="(test, index) in quickTests" 
					:key="index"
					@click="useTestPassword(test.password)"
				>
					{{ test.name }}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			password: '',
			showPassword: false,
			strengthScore: 0,
			strengthLabel: '',
			strengthClass: '',
			strengthPercentage: 0,
			checks: [],
			suggestions: []
		}
	},
	computed: {
		quickTests() {
			return [
				{ name: '弱密码', password: '123456' },
				{ name: '中等密码', password: 'password123' },
				{ name: '强密码', password: 'MySecure@Pass123!' },
				{ name: '超强密码', password: 'K9#mP$2vL@8nQ!5xR*3wE' }
			]
		}
	},
	methods: {
		// 切换密码显示
		togglePasswordVisibility() {
			this.showPassword = !this.showPassword
		},
		
		// 使用测试密码
		useTestPassword(testPassword) {
			this.password = testPassword
			this.checkPasswordStrength()
		},
		
		// 检查密码强度
		checkPasswordStrength() {
			if (!this.password) {
				this.resetStrength()
				return
			}
			
			const analysis = this.analyzePassword(this.password)
			this.updateStrengthDisplay(analysis)
		},
		
		// 重置强度显示
		resetStrength() {
			this.strengthScore = 0
			this.strengthLabel = ''
			this.strengthClass = ''
			this.strengthPercentage = 0
			this.checks = []
			this.suggestions = []
		},
		
		// 分析密码
		analyzePassword(password) {
			const checks = []
			let totalScore = 0
			const suggestions = []
			
			// 1. 长度检查
			const lengthCheck = this.checkLength(password)
			checks.push(lengthCheck)
			totalScore += lengthCheck.score
			
			// 2. 字符类型检查
			const charTypeChecks = this.checkCharacterTypes(password)
			checks.push(...charTypeChecks)
			totalScore += charTypeChecks.reduce((sum, check) => sum + check.score, 0)
			
			// 3. 复杂度检查
			const complexityChecks = this.checkComplexity(password)
			checks.push(...complexityChecks)
			totalScore += complexityChecks.reduce((sum, check) => sum + check.score, 0)
			
			// 4. 常见密码检查
			const commonCheck = this.checkCommonPasswords(password)
			checks.push(commonCheck)
			totalScore += commonCheck.score
			
			// 5. 模式检查
			const patternChecks = this.checkPatterns(password)
			checks.push(...patternChecks)
			totalScore += patternChecks.reduce((sum, check) => sum + check.score, 0)
			
			// 生成建议
			this.generateSuggestions(checks, suggestions)
			
			return {
				score: Math.min(100, Math.max(0, totalScore)),
				checks,
				suggestions
			}
		},
		
		// 检查长度
		checkLength(password) {
			const length = password.length
			let score = 0
			let description = ''
			
			if (length < 6) {
				description = '密码太短，至少需要6个字符'
			} else if (length < 8) {
				score = 5
				description = '密码长度一般，建议8个字符以上'
			} else if (length < 12) {
				score = 10
				description = '密码长度良好'
			} else if (length < 16) {
				score = 15
				description = '密码长度优秀'
			} else {
				score = 20
				description = '密码长度非常优秀'
			}
			
			return {
				title: '密码长度',
				description,
				score,
				passed: length >= 6
			}
		},
		
		// 检查字符类型
		checkCharacterTypes(password) {
			const checks = []
			
			// 小写字母
			const hasLower = /[a-z]/.test(password)
			checks.push({
				title: '小写字母',
				description: hasLower ? '包含小写字母' : '缺少小写字母',
				score: hasLower ? 5 : 0,
				passed: hasLower
			})
			
			// 大写字母
			const hasUpper = /[A-Z]/.test(password)
			checks.push({
				title: '大写字母',
				description: hasUpper ? '包含大写字母' : '缺少大写字母',
				score: hasUpper ? 5 : 0,
				passed: hasUpper
			})
			
			// 数字
			const hasNumber = /\d/.test(password)
			checks.push({
				title: '数字',
				description: hasNumber ? '包含数字' : '缺少数字',
				score: hasNumber ? 5 : 0,
				passed: hasNumber
			})
			
			// 特殊字符
			const hasSpecial = /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(password)
			checks.push({
				title: '特殊字符',
				description: hasSpecial ? '包含特殊字符' : '缺少特殊字符',
				score: hasSpecial ? 10 : 0,
				passed: hasSpecial
			})
			
			return checks
		},
		
		// 检查复杂度
		checkComplexity(password) {
			const checks = []
			
			// 字符多样性
			const uniqueChars = new Set(password).size
			const diversityScore = Math.min(10, Math.floor(uniqueChars / 2))
			checks.push({
				title: '字符多样性',
				description: `使用了${uniqueChars}种不同字符`,
				score: diversityScore,
				passed: uniqueChars >= 8
			})
			
			// 避免重复字符
			const hasRepeating = /(.)\1{2,}/.test(password)
			checks.push({
				title: '重复字符',
				description: hasRepeating ? '包含重复字符' : '无重复字符',
				score: hasRepeating ? -5 : 5,
				passed: !hasRepeating
			})
			
			return checks
		},
		
		// 检查常见密码
		checkCommonPasswords(password) {
			const commonPasswords = [
				'123456', 'password', '123456789', '12345678', '12345',
				'qwerty', 'abc123', '111111', '123123', 'admin',
				'letmein', 'welcome', 'monkey', 'dragon', 'master'
			]
			
			const isCommon = commonPasswords.includes(password.toLowerCase())
			
			return {
				title: '常见密码',
				description: isCommon ? '这是一个常见密码，容易被破解' : '不是常见密码',
				score: isCommon ? -20 : 10,
				passed: !isCommon
			}
		},
		
		// 检查模式
		checkPatterns(password) {
			const checks = []
			
			// 连续数字
			const hasSequential = /(?:012|123|234|345|456|567|678|789|890)/.test(password)
			checks.push({
				title: '连续数字',
				description: hasSequential ? '包含连续数字' : '无连续数字',
				score: hasSequential ? -5 : 5,
				passed: !hasSequential
			})
			
			// 键盘模式
			const keyboardPatterns = /(?:qwe|asd|zxc|qaz|wsx|edc)/.test(password.toLowerCase())
			checks.push({
				title: '键盘模式',
				description: keyboardPatterns ? '包含键盘模式' : '无键盘模式',
				score: keyboardPatterns ? -5 : 5,
				passed: !keyboardPatterns
			})
			
			return checks
		},
		
		// 生成建议
		generateSuggestions(checks, suggestions) {
			checks.forEach(check => {
				if (!check.passed) {
					switch (check.title) {
						case '密码长度':
							suggestions.push('增加密码长度到至少8个字符')
							break
						case '小写字母':
							suggestions.push('添加小写字母')
							break
						case '大写字母':
							suggestions.push('添加大写字母')
							break
						case '数字':
							suggestions.push('添加数字')
							break
						case '特殊字符':
							suggestions.push('添加特殊字符（如!@#$%^&*）')
							break
						case '常见密码':
							suggestions.push('避免使用常见密码，创建独特的密码')
							break
						case '重复字符':
							suggestions.push('避免使用重复字符')
							break
						case '连续数字':
							suggestions.push('避免使用连续数字')
							break
						case '键盘模式':
							suggestions.push('避免使用键盘模式')
							break
					}
				}
			})
			
			// 添加通用建议
			if (suggestions.length === 0) {
				suggestions.push('密码强度很好！建议定期更换密码')
			}
		},
		
		// 更新强度显示
		updateStrengthDisplay(analysis) {
			this.strengthScore = analysis.score
			this.checks = analysis.checks
			this.suggestions = analysis.suggestions
			
			// 设置强度等级
			if (analysis.score < 30) {
				this.strengthLabel = '很弱'
				this.strengthClass = 'very-weak'
				this.strengthPercentage = 25
			} else if (analysis.score < 50) {
				this.strengthLabel = '弱'
				this.strengthClass = 'weak'
				this.strengthPercentage = 50
			} else if (analysis.score < 70) {
				this.strengthLabel = '中等'
				this.strengthClass = 'medium'
				this.strengthPercentage = 75
			} else if (analysis.score < 90) {
				this.strengthLabel = '强'
				this.strengthClass = 'strong'
				this.strengthPercentage = 90
			} else {
				this.strengthLabel = '很强'
				this.strengthClass = 'very-strong'
				this.strengthPercentage = 100
			}
		}
	}
}
</script>

<style>
.container {
	padding: 30rpx;
	min-height: 100vh;
	background: #f5f5f5;
}

.header {
	text-align: center;
	margin-bottom: 40rpx;
}

.title {
	font-size: 40rpx;
	font-weight: bold;
	color: #333;
	display: block;
}

.subtitle {
	font-size: 28rpx;
	color: #666;
	margin-top: 10rpx;
	display: block;
}

/* 密码输入区域 */
.password-input-section {
	margin-bottom: 40rpx;
}

.input-wrapper {
	position: relative;
	background: #fff;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}

.password-input {
	width: 100%;
	height: 100rpx;
	padding: 0 100rpx 0 30rpx;
	font-size: 32rpx;
	border: none;
	border-radius: 12rpx;
	background: transparent;
	box-sizing: border-box;
}

.toggle-btn {
	position: absolute;
	right: 20rpx;
	top: 50%;
	transform: translateY(-50%);
	padding: 10rpx;
}

.toggle-icon {
	font-size: 36rpx;
}

/* 强度指示器 */
.strength-indicator {
	margin-bottom: 40rpx;
}

.strength-bar {
	height: 12rpx;
	background: #eee;
	border-radius: 6rpx;
	overflow: hidden;
	margin-bottom: 15rpx;
}

.strength-fill {
	height: 100%;
	transition: all 0.3s ease;
	border-radius: 6rpx;
}

.strength-fill.very-weak {
	background: #ff3b30;
}

.strength-fill.weak {
	background: #ff9500;
}

.strength-fill.medium {
	background: #ffcc00;
}

.strength-fill.strong {
	background: #34c759;
}

.strength-fill.very-strong {
	background: #007aff;
}

.strength-text {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.strength-label {
	font-size: 28rpx;
	font-weight: bold;
}

.strength-score {
	font-size: 24rpx;
	color: #666;
}

/* 详细分析 */
.analysis-section {
	margin-bottom: 40rpx;
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 20rpx;
}

.check-list {
	background: #fff;
	border-radius: 12rpx;
	overflow: hidden;
	margin-bottom: 30rpx;
}

.check-item {
	display: flex;
	align-items: center;
	padding: 20rpx;
	border-bottom: 1rpx solid #f0f0f0;
}

.check-item:last-child {
	border-bottom: none;
}

.check-item.passed {
	background: rgba(52, 199, 89, 0.05);
}

.check-item.failed {
	background: rgba(255, 59, 48, 0.05);
}

.check-icon {
	margin-right: 20rpx;
}

.icon {
	font-size: 32rpx;
}

.check-content {
	flex: 1;
}

.check-title {
	font-size: 28rpx;
	font-weight: 500;
	color: #333;
	display: block;
}

.check-desc {
	font-size: 24rpx;
	color: #666;
	margin-top: 5rpx;
	display: block;
}

.check-score {
	margin-left: 20rpx;
}

.score-text {
	font-size: 24rpx;
	font-weight: bold;
}

.check-item.passed .score-text {
	color: #34c759;
}

.check-item.failed .score-text {
	color: #ff3b30;
}

/* 建议区域 */
.suggestions-section {
	margin-top: 30rpx;
}

.suggestion-list {
	background: #fff;
	border-radius: 12rpx;
	padding: 20rpx;
}

.suggestion-item {
	display: flex;
	align-items: center;
	padding: 15rpx 0;
	border-bottom: 1rpx solid #f0f0f0;
}

.suggestion-item:last-child {
	border-bottom: none;
}

.suggestion-icon {
	font-size: 28rpx;
	margin-right: 15rpx;
}

.suggestion-text {
	font-size: 26rpx;
	color: #333;
	flex: 1;
}

/* 空状态 */
.empty-state {
	text-align: center;
	margin: 100rpx 0;
}

.empty-icon {
	font-size: 120rpx;
	margin-bottom: 20rpx;
	display: block;
}

.empty-text {
	font-size: 28rpx;
	color: #999;
}

/* 快速测试 */
.quick-test-section {
	margin-top: 40rpx;
}

.test-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 15rpx;
}

.test-btn {
	padding: 15rpx 25rpx;
	background: #fff;
	border: 1rpx solid #ddd;
	border-radius: 8rpx;
	font-size: 26rpx;
	color: #333;
}

.test-btn:active {
	background: #f0f0f0;
}
</style> 